<template>
	<view class="upload-style" @click="uploads(uploadArr)">
		<img src="https://jxfwpt-p.oss-cn-beijing.aliyuncs.com/words/upload_icon.png" alt="">
		<view>{{textName}}</view>
	</view>
</template>
<script>
	export default{
		props:{
            url: {
                type: String,
                default: ''
            },
			// 功能名字
			textName:{
				type:String,
				default:()=>'图片上传'
			},
			// 功能类型
			types:{
				type:String,
				default:()=>'img'
			},
			uploadArr:{
				type:Array,
				default:()=>[]
			},
		},
		data(){
			return{
				imgList:[],		//相册或相机选中的图片数组
				imgUrl:[] 		//上传七牛云返回的图片数组 显示页面中的图片 以及用户保存给后端的数据所需地址
			}
		},
		methods:{
			// 上传调取手机相机 或文件
			uploads(Arrlent){
				// 图片上传
				console.log('上传',Arrlent.length)
				if(Arrlent.length>=5){
					uni.showToast({
						title: '最多允许5张图片',
						icon: 'none'
					});
					return
				}
				uni.chooseImage({
					count: 5-Arrlent.length*1, //最多9张  减去 已上传的数量等于下次上传的最大数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: //['album'], //从相册选择1
					loop: true,
					success: res => {
						uni.showLoading({title: '加载中'})
						if (res.tempFilePaths.length != 0) {
							this.imgList = res.tempFilePaths;
							// imgList是数组 用户传多张 需要一个一个走接口遍历掉接口 Promise.all是接口都走完返回的值
							let res1 = this.imgList.map(img => this.handleSelect(img))
							Promise.all(res1).then(res => {
								uni.hideLoading();
							})
						}
	
					}
				});					
				
				
			},
			handleSelect(tempFilePaths){
				let Authorization = uni.getStorageSync('Access-Token')
				return new Promise((resolve,reject)=>{
					uni.uploadFile({
						url: this.url,
						filePath:tempFilePaths,
						name: 'file',
						header: {
						    u2at: Authorization
						},
						success: (res) => { 
							let urls = JSON.parse(res.data);
							this.$emit('imgListUrl',urls.data);
							resolve();
						},
						fail:(err) => {
							console.log('上传失败',)
							uni.hideLoading();
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upload-style{
		font-size:26rpx;
		img{
			width:48rpx;
			height:44rpx;
			margin-top:30rpx;
		}
	}
</style>